<template>
  <div class="life-content-table">
    <el-table
      :data="tableData"
      border
    >
      <el-table-column
        prop="year"
        label="年份"
        width="80"
        align="center"
        fixed
      />

      <el-table-column
        v-for="month in 12"
        :key="month"
        :prop="'month' + month"
        :label="month + '月'"
        align="center"
      >
        <template #default="{ row }">
          <div
            :class="['row-cell', row.content[month]?.type]"
            @click="openEditDialog(row, month)"
          >
            <div
              v-if="row.content[month] && row.content[month].data.length > 0"
              class="row-content"
            >
              <div
                v-for="(item, index) in row.content[month].data"
                :key="index"
                class="row-item"
              >
                {{ index + 1 }}.{{ item }}
              </div>
            </div>
            <div
              v-else
              class="empty-row"
            >
              点击添加事件
            </div>
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="操作"
        width="80"
        align="center"
        fixed="right"
      >
        <template #default="{ row, $index }">
          <el-button
            type="danger"
            size="small"
            @click="deleteRow(row, $index)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="add-row-container">
      <el-button
        type="primary"
        @click="addNewRow"
      >添加新年份</el-button
      >
    </div>

    <!-- 事件编辑弹窗 -->
    <EventEditDialog
      v-model="dialogVisible"
      :rowData="currentRow"
      @confirm="handleEventSave"
      @delete="handleEventDelete"
    />
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'

import { getData } from './data'
import EventEditDialog from './EventEditDialog.vue'

const tableData = ref([])

// 弹窗相关数据
const dialogVisible = ref(false)
const currentRow = ref({
  year: '',
  month: '',
  content: []
})

// 打开编辑弹窗
const openEditDialog = (row, month) => {
  currentRow.value = {
    year: row.year,
    month,
    content: row.content[month] ? { ...row.content[month] } : {}
  }
  console.log('output->currentRow', currentRow)
  dialogVisible.value = true
}

// 添加新行
const addNewRow = () => {
  tableData.value.push({
    year: new Date().getFullYear(),
    content: {}
  })
}

// 删除行
const deleteRow = (row, index) => {
  tableData.value.splice(index, 1)
  ElMessage.success('删除成功')
}

// 保存整个表格数据
const saveTableData = () => {
  try {
    localStorage.setItem('lifeEventsData', JSON.stringify(tableData.value))
  } catch (error) {
    ElMessage.error(`保存失败: ${error.message}`)
  }
}
// 保存事件
const handleEventSave = (eventData) => {
  const { year, month, content } = eventData

  // 找到对应的年份数据
  const yearData = tableData.value.find((item) => item.year === year)
  if (yearData) {
    // 保存事件内容（数组形式）
    yearData.content[month] = [...content]
    saveTableData()
  }
}

// 删除事件
const handleEventDelete = (eventInfo) => {
  const { year, month } = eventInfo

  // 找到对应的年份数据
  const yearData = tableData.value.find((item) => item.year === year)
  if (yearData) {
    delete yearData.content[month]
    saveTableData()
    ElMessage.success('内容已删除')
  }
}

// 初始化数据
onMounted(() => {
  tableData.value = getData()
})
</script>

<style lang="scss" scoped>
.life-content-table {
  display: flex;
  flex-direction: column;
  padding: 20px;
  height: 100%;
  background-color: #fff;
}

.el-table {
  flex: 1;

  .row-cell {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    padding: 5px;
    min-height: 100px;
    border: 1px dashed #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
    cursor: pointer;
  }

  .row-cell:hover {
    background-color: #ecf5ff;
    border-color: #409eff;
  }

  .row-content {
    width: 100%;
    font-size: 12px;
    text-align: left;
  }

  .row-item {
    padding: 2px 0;
    border-bottom: 1px dashed #eee;
  }

  .row-item:last-child {
    border-bottom: none;
  }

  .empty-row {
    font-size: 12px;
    color: #999;
  }
}

.add-row-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.white {
  color: #fff;
  background-color: #999;
}

.red {
  color: #fff;
  background-color: #f00;
}
</style>
